<template>
  <section class="hero">
    <div class="hero-decorations">
      <div class="decoration-circle primary"></div>
      <div class="decoration-circle secondary"></div>
      <div class="decoration-circle accent"></div>
    </div>
    <div class="container">
      <div class="hero-content">
        <h1 class="hero-title">
          💕 记录情绪，
          <span class="highlight">温柔守护心灵</span>
        </h1>
        <p class="hero-subtitle">
          在这里，每一种情绪都值得被接纳，每一刻感受都值得被看见
        </p>
        <div class="hero-cta">
          <router-link to="/diary">
            <button class="primary-btn">📝 开始记录</button>
          </router-link>
          <router-link to="/relaxation">
            <button class="secondary-btn">🧘 放松练习</button>
          </router-link>
        </div>
      </div>
      <div class="hero-illustration">
        <div class="illustration-heart">❤️</div>
      </div>
    </div>
  </section>

  <section class="features">
    <div class="container">
      <h2 class="section-title">我们的温暖服务</h2>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">📝</div>
          <h3 class="feature-title">情绪日记</h3>
          <p class="feature-description">
            温柔记录每一刻心情，让情绪有处可诉，感受自己的成长轨迹
          </p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📊</div>
          <h3 class="feature-title">情绪分析</h3>
          <p class="feature-description">
            通过可视化了解情绪变化，发现内在模式，给予自己更多理解与接纳
          </p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🧘</div>
          <h3 class="feature-title">放松练习</h3>
          <p class="feature-description">
            引导式冥想和呼吸练习，在忙碌中找回内心的宁静与力量
          </p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📚</div>
          <h3 class="feature-title">心理资源</h3>
          <p class="feature-description">
            精选专业心理文章，在自我探索的路上给予温暖陪伴和指导
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="mood-preview">
    <div class="container">
      <h2 class="section-title">情绪追踪预览</h2>
      <div class="mood-preview-card card">
        <div class="mood-stats">
          <div class="mood-stat">
            <span class="stat-value">78%</span>
            <span class="stat-label">积极情绪比例</span>
          </div>
          <div class="mood-stat">
            <span class="stat-value">21天</span>
            <span class="stat-label">连续记录</span>
          </div>
          <div class="mood-stat">
            <span class="stat-value">5种</span>
            <span class="stat-label">情绪类型</span>
          </div>
        </div>
        <div class="mood-chart-placeholder">
          <div class="chart-bar positive"></div>
          <div class="chart-bar neutral"></div>
          <div class="chart-bar positive"></div>
          <div class="chart-bar negative"></div>
          <div class="chart-bar positive"></div>
        </div>
      </div>
    </div>
  </section>

  <section class="benefits">
    <div class="container">
      <h2 class="section-title">为什么选择我们</h2>
      <div class="benefits-content">
        <div class="benefit-item">
          <div class="benefit-icon">🔒</div>
          <h3 class="benefit-title">温暖的隐私保护</h3>
          <p class="benefit-description">
            我们像守护秘密花园一样保护您的隐私，所有数据加密存储，只有您能访问自己的内心世界
          </p>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🔬</div>
          <h3 class="benefit-title">科学与温暖并重</h3>
          <p class="benefit-description">
            基于认知行为疗法和积极心理学原理，以温柔的方式提供科学有效的情绪管理工具
          </p>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🎨</div>
          <h3 class="benefit-title">个性化心灵旅程</h3>
          <p class="benefit-description">
            理解每个人的心灵都是独特的，根据您的情绪数据，提供专属的建议和内容推荐
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="testimonials">
    <div class="container">
      <h2 class="section-title">温暖反馈</h2>
      <div class="testimonials-slider">
        <div class="testimonial-card">
          <div class="testimonial-content">
            <div class="testimonial-icon">💖</div>
            <div class="testimonial-quote">"每天记录情绪让我学会了与自己和解，接纳每一种情绪的存在，内心变得更加平静。"</div>
            <div class="testimonial-author">— 李女士，28岁
            <div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
            </div>
          </div>
        </div>
        <div class="testimonial-card">
          <div class="testimonial-content">
            <div class="testimonial-icon">🌟</div>
            <div class="testimonial-quote">"放松练习是我每天最期待的时刻，跟随引导慢慢深呼吸，所有的压力都在那一刻得到了释放。"</div>
            <div class="testimonial-author">— 张先生，35岁
            <div class="testimonial-stars">⭐⭐⭐⭐⭐</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="cta">
    <div class="container">
      <div class="cta-content">
        <h2 class="cta-title">开始您的温暖心灵之旅</h2>
        <p class="cta-text">
          每一步记录，每一次觉察，都是对自己最好的温柔
        </p>
        <router-link to="/diary">
          <button class="primary-btn pulse">💕 立即开始</button>
        </router-link>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'HomeView'
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* 治愈系英雄区域 */
.hero {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  color: var(--text-color);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 3rem;
}

.hero-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.5;
  animation: float 10s ease-in-out infinite;
}

.decoration-circle.primary {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--primary-light), transparent);
  top: -100px;
  right: -100px;
}

.decoration-circle.secondary {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, var(--secondary-light), transparent);
  bottom: -100px;
  left: -50px;
  animation-delay: 2s;
}

.decoration-circle.accent {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--accent-light), transparent);
  top: 50%;
  left: 20%;
  animation-delay: 4s;
}

.hero-content {
  position: relative;
  z-index: 1;
  animation: fadeInUp 1s ease-out;
}

.hero-title {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(123, 104, 238, 0.2);
}

.highlight {
  color: var(--accent-color);
}

.hero-subtitle {
  font-size: 1.3rem;
  margin-bottom: 2.5rem;
  color: var(--text-light);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

.hero-cta {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-illustration {
  margin-top: 2rem;
  position: relative;
}

.illustration-heart {
  font-size: 5rem;
  filter: drop-shadow(0 4px 8px rgba(255, 154, 162, 0.3));
  animation: pulse 2s ease-in-out infinite;
}

/* 按钮样式 */
.primary-btn {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
}

.primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.primary-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: var(--transition);
}

.primary-btn:hover::before {
  width: 300px;
  height: 300px;
}

.secondary-btn {
  background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
  color: var(--text-color);
  border: none;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
}

.secondary-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.pulse {
  animation: pulse 2s infinite;
}

/* 服务特色区域 */
.features {
  margin-bottom: 4rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.feature-card {
  background-color: white;
  border-radius: var(--radius-md);
  padding: 2.5rem 1.5rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  text-align: center;
  border: 1px solid var(--light-border);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  opacity: 0;
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 8px rgba(123, 104, 238, 0.2));
  transition: var(--transition);
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

.feature-title {
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-size: 1.4rem;
  font-weight: 700;
}

.feature-description {
  color: var(--text-light);
  line-height: 1.7;
}

/* 情绪预览卡片 */
.mood-preview {
  margin-bottom: 4rem;
}

.mood-preview-card {
  background-color: white;
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--light-border);
}

.mood-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.mood-stat {
  text-align: center;
  flex: 1;
  min-width: 100px;
}

.stat-value {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.stat-label {
  color: var(--text-light);
  font-size: 0.9rem;
}

.mood-chart-placeholder {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 120px;
  padding: 1rem 0;
  background-color: var(--section-bg);
  border-radius: var(--radius);
}

.chart-bar {
  width: 40px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  animation: growBar 1s ease-out;
}

.chart-bar.positive {
  background: linear-gradient(to top, var(--secondary-color), var(--secondary-light));
  height: 80%;
}

.chart-bar.neutral {
  background: linear-gradient(to top, var(--primary-light), var(--primary-color));
  height: 50%;
}

.chart-bar.negative {
  background: linear-gradient(to top, var(--accent-color), var(--accent-light));
  height: 30%;
}

/* 优势区域 */
.benefits {
  background-color: var(--section-bg);
  padding: 4rem 0;
  margin-bottom: 4rem;
  border-radius: var(--radius-lg);
}

.benefits-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-light);
  transition: var(--transition);
}

.benefit-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}

.benefit-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-weight: 700;
}

.benefit-description {
  color: var(--text-light);
  line-height: 1.7;
}

/* 温暖反馈区域 */
.testimonials {
  margin-bottom: 4rem;
}

.testimonials-slider {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.5rem;
}

.testimonial-card {
  background-color: white;
  border-radius: var(--radius-md);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow);
  position: relative;
  text-align: center;
  border: 1px solid var(--light-border);
  transition: var(--transition);
  flex: 1;
  min-width: 300px;
  max-width: 500px;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.testimonial-icon {
  font-size: 2.5rem;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary-color);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}

.testimonial-quote {
  margin-bottom: 1.5rem;
  font-style: italic;
  color: var(--text-color);
  line-height: 1.8;
  font-size: 1.1rem;
  padding-top: 1rem;
}

.testimonial-author {
  font-weight: bold;
  color: var(--primary-color);
}

.testimonial-stars {
  margin-top: 0.5rem;
  color: var(--accent-color);
  font-size: 0.9rem;
}

/* 行动召唤区域 */
.cta {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  color: white;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
  z-index: 0;
}

.cta-content {
  position: relative;
  z-index: 1;
}

.cta-title {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.cta-text {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes growBar {
  from {
    height: 0;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
  
  .hero {
    padding: 3rem 0;
  }
  
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .illustration-heart {
    font-size: 3rem;
  }
  
  .features-grid,
  .benefits-content {
    grid-template-columns: 1fr;
  }
  
  .cta-title {
    font-size: 1.8rem;
  }
  
  .primary-btn,
  .secondary-btn {
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
  }
}
</style>